<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/peizhi-styles.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/codemirror.min.css') }}">
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css">-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/javascript/javascript.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <title>网络配置生成工具</title>
    <link rel="shortcut icon" href="img/small-logo.png">
<style>
/* 添加到您的CSS文件中 */
/* 默认样式 */
footer {
  background-color: #3498db; /* Navy background */
  color: white; /* Inverse text color */
  /* ... 其他样式 ... */
}
/* 移动设备上的样式 */
@media (max-width: 768px) {
  footer {
    display: flex; /* 使用Flexbox布局 */
    flex-wrap: wrap; /* 允许项目多行排列 */
    justify-content: space-between; /* 分布对齐 */
  }
  
  .container {
    padding: 0; /* 移除内边距 */
  }
  
  .row {
    display: flex; /* 使用Flexbox布局 */
    flex-wrap: wrap; /* 允许项目多行排列 */
  }
  
  .col-md-4, .col-lg-3 {
    flex-basis: 100%; /* 占据全部宽度 */
  }
  
  .widget {
    text-align: center; /* 文本居中 */
  }
  
  .btn-primary {
    width: 50%; /* 宽度占据100% */
  }
}

#agg_member_group {
  width: 100px;
}
</style>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/user-style.css') }}">
  </head>

    <body>
      <div>
        <nav id="sticky-navbar-3" class="navbar navbar-expand-lg center-nav transparent navbar-light navbar-clone fixed">
          <div class="container flex-lg-row flex-nowrap align-items-center">
            <div class="navbar-brand w-100"><a href="./index.html"><img src="img/logo-small-svg.svg" alt="" /></a></div>
            <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
              <div class="offcanvas-header d-lg-none">
                <h3 class="text-white fs-30 mb-0">NetConf</h3><button type="button" data-bs-dismiss="offcanvas" aria-label="Close" class="btn-close btn-close-white"></button>
              </div>
              <div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
                <ul class="navbar-nav">
                <div class="offcanvas-footer d-lg-none">
                  <div><a href="mailto:1510756862@qq.com" class="link-inverse">1510756862@qq.com</a><!--<br /> <br />-->
                    <nav class="nav social social-white mt-4"><a href="#"><i class="uil uil-twitter"></i></a><a href="#"><i class="uil uil-facebook-f"></i></a><a href="#"><i class="uil uil-dribbble"></i></a><a href="#"><i class="uil uil-instagram"></i></a><a href="#"><i class="uil uil-youtube"></i></a></nav><!-- /.social -->
                  </div>
                </div><!-- /.offcanvas-footer -->
            <div class="navbar-other w-100 d-flex ms-auto">
              <ul class="navbar-nav flex-row align-items-center ms-auto">
                <li class="nav-item"><a data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info" class="nav-link"><i class="uil uil-info-circle"></i></a></li>
                <li class="nav-item d-lg-none"><button class="hamburger offcanvas-nav-btn"><span></span></button></li>
              </ul><!-- /.navbar-nav -->
            </div><!-- /.navbar-other -->

        </nav>
        <link rel="shortcut icon" href="img/logo.png" />
        <link rel="shortcut icon" href="https://htmlpage.cn/favicon.png" />
        <link rel="stylesheet" href="{{ url_for('static', filename='css/plugins.css') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/yellow.css') }}">
        <link rel="preload" href="{{ url_for('static', filename='css/thicccboi.css') }}" as="style">
        <div class="content-wrapper">
          <header class="wrapper bg-soft-primary">
            <nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
              <div class="container flex-lg-row flex-nowrap align-items-center">
                <div class="navbar-brand w-100"><a href="/"><img src="img/logo.png" alt="" /></a></div>
                <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
                  <div class="offcanvas-header d-lg-none">
                    <h3 class="text-white fs-30 mb-0">NetConf</h3><button type="button" data-bs-dismiss="offcanvas" aria-label="Close" class="btn-close btn-close-white"></button>
                  </div>
                  <div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
                    <ul class="navbar-nav">
                      <li class="nav-item dropdown"></li>
                      <li class="nav-item dropdown">
                        <div class="dropdown-menu dropdown-lg">
                          <div class="dropdown-lg-content">
                            <div>

                            </div><!-- /.column -->
                            <div>

                            </div><!-- /.column -->
                          </div><!-- /auto-column -->
                        </div>
                    </ul><!-- /.navbar-nav -->

                    <div class="offcanvas-footer d-lg-none">
                      <div><a href="mailto:1510756862@qq.com" class="link-inverse">1510756862@qq.com</a><!--<br /> <br />-->
                        <nav class="nav social social-white mt-4"><a href="#"><i class="uil uil-twitter"></i></a><a href="#"><i class="uil uil-facebook-f"></i></a><a href="#"><i class="uil uil-dribbble"></i></a><a href="#"><i class="uil uil-instagram"></i></a><a href="#"><i class="uil uil-youtube"></i></a></nav><!-- /.social -->
                      </div>
                    </div><!-- /.offcanvas-footer -->
                  </div><!-- /.offcanvas-body -->

                </div><!-- /.navbar-collapse -->
                <!--<div id="login-register"><a href="../templates/register.html">登录/注册</a></div>-->
                <div class="navbar-other w-100 d-flex ms-auto">
                  <ul class="navbar-nav flex-row align-items-center ms-auto">
                    <li class="nav-item"><a data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info" class="nav-link"></a></li>
                    <li class="nav-item d-lg-none"><button class="hamburger offcanvas-nav-btn"><span></span></button></li>
                  </ul><!-- /.navbar-nav -->
                </div><!-- /.navbar-other -->
              </div><!-- /.container -->
            </nav><!-- /.navbar -->
            <div id="offcanvas-info-3" data-bs-scroll="true" class="offcanvas offcanvas-end text-inverse">
              <div class="offcanvas-header">
                <h3 class="text-white fs-30 mb-0">NetConf</h3><button type="button" data-bs-dismiss="offcanvas" aria-label="Close" class="btn-close btn-close-white"></button>
              </div>
              <div class="offcanvas-body pb-6">

                <div class="widget mb-8">
                  <h4 class="widget-title text-white mb-3">了解更多</h4>
                  <ul class="list-unstyled">
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">隐私保护</a></li>
                    <li><a href="#">法律法规</a></li>
                    <li><a href="#">联系我们</a></li>
                  </ul>
                </div><!-- /.widget -->
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">关注我们</h4>
                  <nav class="nav social social-white"><a href="#"><i class="uil uil-twitter"></i></a><a href="#"><i class="uil uil-facebook-f"></i></a><a href="#"><i class="uil uil-dribbble"></i></a><a href="#"><i class="uil uil-instagram"></i></a><a href="#"><i class="uil uil-youtube"></i></a></nav><!-- /.social -->
                </div><!-- /.widget -->
              </div><!-- /.offcanvas-body -->
            </div><!-- /.offcanvas -->
          </header><!-- /header -->

        <div class="radio-container">
            <a href="/"><label class="radio-label">开局配置</label></a>
        </div>
        <div class="radio-container">
            <a href="/dhcp"><label class="radio-label">DHCP配置</label></a>
        </div>
        <div class="radio-container">
          <a href="/agg"><label class="radio-label">端口聚合</label></a>
      </div>
  <h3>端口聚合</h3>
<form action="/agg" method="post" onsubmit="return validateForm()">
  <a class="device-manufacturer">*设备厂商：</a>
    <div class="radio-container">
        <input type="radio" id="huawei" name="agg_manufacturer" value="华为" checked>
        <label for="huawei" class="radio-label">华为</label>
    </div>

    <div class="radio-container">
        <input type="radio" id="huasan" name="agg_manufacturer" value="华三">
        <label for="huasan" class="radio-label">华三</label>
    </div>

    <div class="radio-container">
        <input type="radio" id="cisco" name="agg_manufacturer" value="思科">
        <label for="cisco" class="radio-label">思科</label>
    </div>

    <div class="radio-container">
        <input type="radio" id="ruijie" name="agg_manufacturer" value="锐捷">
        <label for="ruijie" class="radio-label">锐捷</label>
    </div>

    <div class="radio-container">
        <input type="radio" id="zhongxing" name="agg_manufacturer" value="中兴">
        <label for="zhongxing" class="radio-label">中兴</label>
    </div>

    <div class="input-group">
        <div class="input-container">
      <label for="agg_vlan">创建Vlan:</label>
      <input type="text" id="agg_vlan" name="agg_vlan" value="10 20">
      </div>
    <div class="input-container">
    <label for="agg_member_group">创建聚合组:</label>
    <input type="text" id="agg_member_group" name="agg_member_group" value="1">
    </div>
  <div class="input-container">
      <label for="agg_port_type">聚合模式:</label>
      <select id="agg_port_type" name="agg_port_type">
          <option >动态</option>
          <option >静态</option>
      </select>
  </div>
</div>

<div class="input-group">
    <div class="input-container">
        <label for="agg_member_port">成员端口号:</label>
        <select id="agg_member_port" name="agg_member_port">
            <option >100M</option>
            <option >GE</option>
            <option >10GE</option>
            <option >25GE</option>
            <option >40GE</option>
            <option >100GE</option>
        </select>
        </div>
        <div class="input-container">
        <label for="agg_slot">槽位:</label>
        <select id="agg_slot" name="agg_slot">
            <option value="0">0槽位</option>
            <option value="1">1槽位</option>
            <option value="2">2槽位</option>
            <option value="3">3槽位</option>
            <option value="4">4槽位</option>
            <option value="5">5槽位</option>
            <option value="6">6槽位</option>
            <option value="7">7槽位</option>
            <option value="8">8槽位</option>
        </select>
     </div> 
     <div class="input-container"> 
        <label for="agg_port">端口:</label>
        <input type="text" id="agg_port" name="agg_port" value="47 48">
      </div>
       </div>
  <div class="input-group">
    <div class="input-container">
        <label for="agg_port_type_l">端口类型:</label>
        <select id="agg_port_type_l" name="agg_port_type_l">
            <option >trunk</option>
            <option >access</option>
        </select>
 </div> 
<div class="input-container">
  <label for="agg_allow_vlan">允许vlan:</label>
  <input type="text" id="agg_allow_vlan" name="agg_allow_vlan" value="10 20">
  
</div>
<a class="device-manufacturer">*选择access请输入单个vlan,选择trunk请输入多个vlan,以空格键符分隔</a>
</div>

<input class="Generate-configuration" type="submit" value="生成配置">
</form>

<div class="code-container">
  <h2>生成的配置命令：</h2>
  <textarea id="code" rows="10" cols="50">{%for command in config_commands%}{{command}}{%endfor%}</textarea>
  <button class="copy-btn">复制</button>
  <span class="copy-success">已复制到粘贴板!</span>
</div>

<script src="{{ url_for('static', filename='js/script.js') }}"></script>
        <footer class="bg-navy text-inverse">
          <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
            <div class="d-lg-flex flex-row align-items-lg-center">
              <h3 class="display-4 mb-6 mb-lg-0 pe-lg-20 pe-xl-22 pe-xxl-25 text-white">如遇到问题请与我们联系，感谢支持！</h3><a href="https://f.wps.cn/g/7iVJAItY/" class="btn btn-primary rounded-pill mb-0 text-nowrap">我要留言</a>
            </div>
            <!--/div -->
            <hr class="mt-11 mb-12" />
            <div class="row gy-6 gy-lg-0">
              <div class="col-md-4 col-lg-3">
                <div class="widget"><img src="img/small-logo.png" alt="" class="mb-4" />
                  <p class="mb-4">© 2023-2024 网络配置生成工具.</p>
                  <nav class="nav social social-white"><a href="#"><i class="uil uil-twitter"></i></a><a href="#"><i class="uil uil-facebook-f"></i></a><a href="#"><i class="uil uil-dribbble"></i></a><a href="#"><i class="uil uil-instagram"></i></a><a href="#"><i class="uil uil-youtube"></i></a></nav><!-- /.social -->
                </div><!-- /.widget -->
              </div><!-- /column -->
              <div class="col-md-4 col-lg-3">
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">联系我们</h4>
             <img style="width: 150px; height: 150px;" src="/static/images/WeChat.jpg" />
                </div><!-- /.widget -->
              </div><!-- /column -->
              <div class="col-md-4 col-lg-3">
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">了解更多</h4>
                  <ul class="list-unstyled mb-0">
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">解决方案</a></li>
                    <li><a href="#">项目案例</a></li>
                    <li><a href="#">隐私条款</a></li>
                    <li><a href="#">相关法规</a></li>
                  </ul>
                </div><!-- /.widget -->
              </div><!-- /column -->
              <div class="col-md-12 col-lg-3">
                <div class="widget">
                    
                  <h4 class="widget-title text-white mb-3">电子邮件</h4>
                  <p class="mb-5">您可以发送邮件到：<a href="mailto:1510756862@qq.com" class="hover">1510756862@qq.com</a>联系我们！</p><!-- /.newslet
                  t-wrapper -->
                </div><!-- /.widget -->
              </div><!-- /column -->
            </div>
            <!--/.row -->
            
          </div><!-- /.container -->
          <div style="text-align: center;">
              Copyright © 2023-2024 NetConf · 
              <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener">京ICP备2023036694号-1</a> 
              <!--京公网安备 号-->
          </div>
        </footer>
        <script src="js/plugins.js"></script>
        <script src="js/theme.js"></script>
    </body>
  </html>